<template>
  <div class="wrap">
    <div class="top-wrap">
      <div class="content-wrap">
        <img class="icon" src="@/assets/images/page2/kongqizhiliang@2x.png" alt="" />
        <p class="value">
          空气质量：PM2.5
          <span class="result">优</span>
        </p>
      </div>
      <div class="content-wrap">
        <img class="icon" src="@/assets/images/page2/wendu-2@2x.png" alt="" />
        <p class="value">
          今日温度：{{weatherData.temp}} ℃
        </p>
      </div>
      <div class="content-wrap">
        <img class="icon" src="@/assets/images/page2/shidu@2x.png" alt="" />
        <p class="value">
          今日湿度：{{weatherData.rh}} %
        </p>
      </div>
    </div>
    <div class="main-wrap">
      <div class="content-wrap">
        <div class="title-wrap">
          <p>
            设备信息统计
          </p>
        </div>
        <div class="content-container">
          <div class="value-wrap">
            <el-progress class="progress-1" type="circle" width="150" height="150" :percentage="40" :show-text="false" status="exception" :stroke-width="15"></el-progress>
            <p class="value">40%</p>
            <p class="text">故障</p>
            <p class="value-text">
              12台
              <span>总:30台</span>
            </p>
          </div>
          <div class="value-wrap">
            <el-progress class="progress-2" type="circle" width="150" height="150" :percentage="40" :show-text="false" status="warning" :stroke-width="15"></el-progress>
            <p class="value">40%</p>
            <p class="text">告警</p>
            <p class="value-text">
              12台
              <span>总:30台</span>
            </p>
          </div>
          <div class="value-wrap">
            <el-progress class="progress-3" type="circle" width="150" height="150" :percentage="50" :show-text="false" color="#c6c7c8" :stroke-width="15"></el-progress>
            <p class="value">50%</p>
            <p class="text">离线</p>
            <p class="value-text">
              15台
              <span>总:30台</span>
            </p>
          </div>
          <div class="value-wrap">
            <el-progress class="progress-4" type="circle" width="150" height="150" :percentage="100" :show-text="false" :stroke-width="15"></el-progress>
            <p class="value">100%</p>
            <p class="text">在线</p>
            <p class="value-text">
              30台
              <span>总:30台</span>
            </p>
          </div>
        </div>
      </div>
      <div class="video-wrap first">
        <iframe src="/video.html?port=9999" frameborder="0"></iframe>
      </div>
      <div class="content-wrap">
        <div class="title-wrap">
          <p>
            智能设备状态
          </p>
        </div>
        <div class="content-container" id="chart1"></div>
      </div>
      <div class="video-wrap">
        <iframe src="/video.html?port=9998" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</template>
<script>
  var echarts = require("echarts");
  import apis from '@/apis'

  export default {
    data() {
      return {
        option1: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          textStyle: {
            color: "#fff"
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: 30
          }]
        },
        weatherData: {}
      }
    },
    methods: {
      setChart1() {
        var myChart = echarts.init(document.getElementById("chart1"));
        myChart.setOption(this.option1);
      },
      openWebsocket() {
      const wsServer =
        process.env.NODE_ENV === "development"
          ? `ws://101.37.205.208:8002/websocket/1`
          : `ws://101.37.205.208:8002/websocket/1`; // 服务器地址
      const websocket = new WebSocket(wsServer); // 创建WebSocket对象
      websocket.onmessage = evt => {
        try {
          let data = JSON.parse(evt.data);
          let typeList = [...new Set(data.map(item => item.deviceType))]
          let valueList = []
          for(let i in typeList) {
            let value = data.filter(item => item.deviceType === typeList[i]).length
            valueList.push(value)
          }
          this.option1.xAxis.data = typeList
          this.option1.series[0].data = valueList
          this.setChart1()
        } catch (e) {
          console.log(e)
        }
      };
    }
    },
    mounted() {
      this.setChart1()
      // 获取天气
      this.$http.get(apis.getWeather).then(res => {
        this.weatherData = res.data.result.now
      })
      this.openWebsocket();
    }
  }
</script>
<style lang="less" scoped>
  p {
    margin: 0;
  }

  .wrap {
    width: 100vw;
    height: 100vh;
    background: url("../../../assets/images/page2/right-screen-background.png");
    background-size: 100% 100%;

    .top-wrap {
      border-top: 20px solid rgba(0, 0, 0, 0);
      width: calc(100vw - 30px);
      height: 106px;
      background: url("../../../assets/images/page2/top-background.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .content-wrap {
        width: 33%;
        height: 106px;
        float: left;

        .icon {
          width: 42px;
          height: 42px;
          float: left;
          margin-top: 32px;
          margin-left: 87px;
        }

        .value {
          font-size: 26px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 38px;
          text-align: left;
          line-height: 106px;
          margin: 0;
          margin-left: 5px;

          .result {
            font-size: 26px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: rgba(136, 197, 51, 1);
            line-height: 106px;
            letter-spacing: 1px;
            margin-left: 57px;
          }
        }
      }
    }

    .main-wrap {
      .content-wrap {
        width: 1020px;
        height: 395px;
        background: rgba(10, 165, 255, 0.1);
        border-radius: 8px;
        float: left;
        margin-top: 33px;
        margin-left: 47px;
        margin-right: 61px;

        &:first-child {
          margin-top: 55px;
        }

        .title-wrap {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          height: 60px;
          line-height: 60px;
          border-bottom: 1px dotted #00B6C7;
          text-align: left;
          text-indent: 30px;

          span {
            float: right;
            margin-right: 30px;
          }
        }
      }

      .video-wrap {
        width: 731px;
        height: 395px;
        float: left;
        margin-top: 33px;

        &.first {
          margin-top: 55px;
        }

        iframe {
          width: 731px;
          height: 395px;
        }
      }

      .content-container {
        width: 100%;
        height: 300px;

        .value-wrap {
          width: 25%;
          height: 300px;
          float: left;
          padding-top: 50px;
          position: relative;

          .value {
            font-size: 32px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            position: absolute;
            top: 90px;
            left: 95px;
            text-align: center;
          }

          .text {
            font-size: 20px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            position: absolute;
            top: 140px;
            left: 105px;
          }

          .value-text {
            font-size: 30px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 45px;
            margin-top: 30px;

            span {
              font-size: 26px;
              font-family: SourceHanSansSC-Regular, SourceHanSansSC;
              font-weight: 400;
              color: rgba(173, 173, 173, 1);
              line-height: 38px;
            }
          }
        }
      }
    }
  }
</style>
<style lang="less">
.progress-1 path{
  stroke: rgba(249,71,116,0.5);
}
.progress-2 path{
  stroke: rgba(254,171,67,0.5);;
}
.progress-3 path{
  stroke: rgba(198,199,200,0.5);
}
.progress-4 path{
  stroke: rgba(10,165,255,0.5);
}
</style>